export default {
  data () {
    return {
      userList: [], // 用户列表
      total: 1, // 数据总条数
      searchText: '', // 搜索文本
      pageNum: 1, // 当前页数
      // 添加用户对话框数据
      dialogFormVisible: false,
      addUser: {
        username: '',
        password: '',
        email: '',
        mobile: ''
      },
      rules: {
        username: [{
          required: true,
          message: '请输入用户名',
          trigger: 'blur'
        },
        {
          min: 3,
          max: 5,
          message: '长度在 3 到 5 个字符',
          trigger: 'blur'
        }
        ],
        password: [{
          required: true,
          message: '请输入密码',
          trigger: 'blur'
        },
        {
          min: 6,
          max: 10,
          message: '长度在 6 到 10 个字符',
          trigger: 'blur'
        }
        ],
        email: [{
          pattern: /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/,
          message: '邮箱格式不正确',
          trigger: 'blur'
        }],
        mobile: [{
          pattern: /^1(3|4|5|7|8)\d{9}$/,
          message: '手机格式不正确',
          trigger: 'blur'
        }]
      },
      // 编辑用户数据
      dialogEditVisible: false,
      editUserForm: {
        username: '',
        email: '',
        mobile: ''
      },
      // 分配角色数据
      dialogAssignVisible: false,
      assignRolesForm: {
        username: '',
        rid: -1
      },
      rolesList: []
    }
  },
  created () {
    const curPage = this.$route.params.page
    this.loadUserList(curPage)
    this.getRolesList()
  },
  methods: {
    // 获取用户列表
    async loadUserList (pagenum = 1, query = '') {
      const res = await this.$axios.get('http://localhost:8888/api/private/v1/users', {
        params: {
          query,
          pagenum,
          pagesize: 2
        },
        headers: {
          Authorization: localStorage.getItem('token')
        }
      })
      // console.log(res)
      this.userList = res.data.data.users
      this.total = res.data.data.total
      this.pageNum = res.data.data.pagenum
      //   .then(res => {
      //   console.log(res)
      //   this.userList = res.data.data.users
      //   this.total = res.data.data.total
      // })
    },
    // 分页功能
    currentChange (currentPage) {
      this.loadUserList(currentPage, this.searchText)
      this.$router.push('/users/' + currentPage)
    },
    // 搜索功能
    queryUsers () {
      this.loadUserList(1, this.searchText)
    },
    // 修改状态
    async changeUserState (row) {
      // console.log(row)
      // console.log(this.$axios === axios)
      const res = await this.$axios.put(`users/${row.id}/state/${row.mg_state}`)
      this.$message({
        type: 'success',
        message: res.data.meta.msg
      })
    },
    // 添加用户对话框
    addUserDialog () {
      this.dialogFormVisible = true
    },
    closeAddDialog () {
      this.$refs.addUser.resetFields()
      this.dialogFormVisible = false
    },
    // 添加用户
    async addUserData () {
      try {
        await this.$refs.addUser.validate()
        const res = await this.$axios.post('users', this.addUser)
        // console.log(res)
        if (res.data.meta.status === 201) {
          this.$message({
            type: 'success',
            message: res.data.meta.msg
          })
          this.$refs.addUser.resetFields()
          this.loadUserList()
        } else {
          this.$message({
            type: 'warning',
            message: res.data.meta.msg
          })
        }
        this.dialogFormVisible = false
      } catch (error) {
        console.log(error)
      }
    },
    // 删除用户
    async deleteUser (id) {
      try {
        await this.$confirm('此操作将永久删除用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        await this.$axios.delete(`users/${id}`)
        this.$message({
          type: 'success',
          message: '删除成功'
        })
        this.loadUserList()
      } catch (error) {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      }
    },
    // 编辑用户
    editUserDialog (row) {
      this.dialogEditVisible = true
      this.editUserForm = row
    },
    async editUser () {
      const {
        id,
        email,
        mobile
      } = this.editUserForm
      try {
        const res = await this.$axios.put(`users/${id}`, {
          email,
          mobile
        })
        if (res.data.meta.status === 200) {
          this.dialogEditVisible = false
          this.$message({
            type: 'success',
            message: res.data.meta.msg
          })
          this.loadUserList()
        }
      } catch (error) {
        this.$message({
          type: 'success',
          message: '更新失败'
        })
      }
    },
    // 打开分配角色对话框
    async openAssignDialog (row) {
      this.dialogAssignVisible = true
      const res = await this.$axios.get(`users/${row.id}`)
      this.assignRolesForm.username = row.username
      this.assignRolesForm.rid = res.data.data.rid === -1 ? '' : res.data.data.rid
      this.assignRolesForm.id = row.id
    },
    // 获取权限列表
    async getRolesList () {
      const res = await this.$axios.get('roles')
      this.rolesList = res.data.data
    },
    // 确认分配角色
    async confirmAssignRoles () {
      let {id, rid} = this.assignRolesForm
      await this.$axios.put(`users/${id}/role`, {
        rid
      })
      this.dialogAssignVisible = false
      this.loadUserList()
      this.$message({
        type: 'success',
        message: '设置角色成功'
      })
    }
  }
}
